<!-- 登录拦截 -->
<script src="../assets/js/jquery.min.js"></script>
<script>
      var id = sessionStorage.getItem('userId')
    if (!id) {
        location.href = 'login.html'
    }
</script>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理-用户管理</title>
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/admin/common.css">
    <link rel="stylesheet" href="../assets/css/admin/users.css">
    <link rel="stylesheet" href="../assets/utils/nprogress/nprogress.css">
    <script src="../assets/utils/nprogress/nprogress.js"></script>
</head>

<body>
    <script>
        NProgress.start()
    </script>
    <!-- 1、左边导航栏区域 -->
    <div class="aside">
        <!-- 1-1-用户头像信息 -->
        <div class="user-info" id="userData">
            <img src="/assets/uploads/5.jpg" alt="">
            <h3>梦里百川</h3>
        </div>
        <!-- 1-2-菜单栏信息 -->
        <ul class="nav">
            <li>
                <a href="index.html"><span class="glyphicon glyphicon-equalizer"></span>首页</a>
            </li>

            <li>
                <a href="#menu-posts" class="collapsed" data-toggle="collapse">
                    <span class="glyphicon glyphicon-level-up"></span>文章<i class="glyphicon glyphicon-menu-down"></i>
                </a>
                <ul id="menu-posts" class="collapse">
                    <li><a href="allArticle.html">所有文章</a></li>
                    <li><a href="writeArticle.html">写文章</a></li>
                    <li><a href="catalogArticle.html">文章类别</a></li>
                </ul>
            </li>

            <li>
                <a href="comments.html"><span class="glyphicon glyphicon-equalizer"></span>评论</a>
            </li>
            <li class="active">
                <a href="users.html"><span class="glyphicon glyphicon-equalizer"></span>用户</a>
            </li>
            <li>
                <a href="#menu-settings" class="collapsed" data-toggle="collapse">
                    <span class="glyphicon glyphicon-equalizer"></span>设置<i class="glyphicon glyphicon-menu-down"></i>
                </a>
                <ul id="menu-settings" class="collapse">
                    <li><a href="rotation.html">图片轮播</a></li>
                    <li><a href="settings.html">网站设置</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- 2、主体内容区域 -->
    <div class="main">
        <!-- 2-1-顶部小白条 -->
        <div class="navbar">
            <h3 class="title">用户管理</h3>
            <ul>
                <li><a href="resetPwd.html"><i class="glyphicon glyphicon-wrench"></i> 修改密码</a></li>
                <li><a href="login.html"><i class="glyphicon glyphicon-off"></i> 退出登录</a></li>
            </ul>
        </div>
        <!-- 2-2-主体内容 -->
        <div class="container-box">
            <div class="row">
                <!-- 2-2-1-添加用户 -->
                <div class="col-md-4 user-info" id="userForm">
                    <form id="addUserForm">
                        <h3>添加新用户</h3>
                        <div class="form-group userimg">
                            <div class="user-img">
                                <label for="InputFile" class="input-img">
                                    <input type="file" id="InputFile">
                                    <img src="../assets/images/timg.jfif" id="preview">
                                </label>
                                <!-- 隐藏域 -->
                                <input type="hidden" name="avatar" id="hiddenAvatar">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>邮箱地址</label>
                            <input class="form-control" type="email" placeholder="请输入邮箱" name="email">
                        </div>
                        <div class="form-group">
                            <label for="InputName">昵称</label>
                            <input type="text" class="form-control" id="InputName" placeholder="请输入昵称" name="nickName">
                        </div>
                        <div class="form-group">
                            <label for="InputPassword">密码</label>
                            <input type="password" class="form-control" id="InputPassword" placeholder="请输入密码"
                                name="password">
                        </div>
                        <div class="form-group">
                            <div class="radio-inline">
                                <label> <input type="radio" name="status" value="1">激活</label>

                            </div>
                            <div class="radio-inline">
                                <label><input type="radio" name="status" value="0">未激活</label>

                            </div>
                        </div>
                        <div class="form-group">
                            <div class="radio-inline">
                                <label> <input type="radio" name="role" value="admin">管理员</label>

                            </div>
                            <div class="radio-inline">
                                <label> <input type="radio" name="role" value="normal">普通用户</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary add-user">添加</button>
                        </div>
                    </form>
                </div>
                <!-- 2-2-2-用户列表信息 -->
                <div class="col-md-8 user-list">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center" width="40"><input type="checkbox" id="checkAll"></th>
                                <th class="text-center" width="80">头像</th>
                                <th>邮箱</th>
                                <th>昵称</th>
                                <th>状态</th>
                                <th>角色</th>
                                <th class="text-center" width="100">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 下面两个tr是假数据，当发了ajax请求，这里就会被替换 -->
                            <tr>
                                <td class="text-center"><input type="checkbox"></td>
                                <td class="text-center"><img class="avatar" src="/assets/uploads/6.jpeg"></td>
                                <td>weila@itcast.cn</td>
                                <td>薇拉</td>
                                <td>激活</td>
                                <td>普通用户</td>
                                <td class="text-center">
                                    <a href="javascript:;" class="btn btn-default btn-sm">编辑</a>
                                    <a href="javascript:;" class="btn btn-danger btn-sm">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center"><input type="checkbox"></td>
                                <td class="text-center"><img class="avatar" src="/assets/uploads/8.png"></td>
                                <td>coder@itcast.cn</td>
                                <td>coder</td>
                                <td>激活</td>
                                <td>普通用户</td>
                                <td class="text-center">
                                    <a href="javascript:;" class="btn btn-default btn-sm">编辑</a>
                                    <a href="javascript:;" class="btn btn-danger btn-sm">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 批量删除按钮，只有大于两个复选框或全选被选中才会出现 -->
                    <a href="javascript:;" class="btn btn-danger btn-md  pull-right" id="deleteAll">批量删除</a>
                </div>
            </div>
        </div>

    </div>
    <!-- js -->
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/utils/art-template/template-web.js"></script>
    <script src="../assets/js/common.js"></script>

    <script>
        NProgress.done()
    </script>
    <script src="../assets/js/users.js"></script>
    <!-- 3、用户信息列表模板-开始 -->
    <script type="text/html" id="userListTpl">
        {{each data }}
        <tr>
            <td class="text-center"><input type="checkbox" data-id="{{$value._id}}" class="userCheck"></td>
            <td class="text-center">
                {{if $value.avatar}}
                <img class="avatar" src="{{$value.avatar}}">
                {{else}}
                <img class="avatar" src="\uploads\default.jfif">
                {{/if}}
            </td>
            <td>{{$value.email}}</td>
            <td>{{$value.nickName}}</td>
            <td>{{$value.status == 0? '未激活':'激活'}}</td>
            <td>{{$value.role=='admin'?'管理员':'普通用户'}}</td>
            <td class="text-center">
                <a href="javascript:;" class="btn btn-default btn-sm editBtn" data-id="{{$value._id}}">编辑</a>
                <a href="javascript:;" class="btn btn-danger btn-sm removeBtn" data-id="{{$value._id}}">删除</a>
            </td>
        </tr>
        {{/each}}
    </script>
    <!-- 3、用户信息列表模板-结束 -->
    <!-- 4、修改用户信息表单-开始 -->
    <script type="text/html" id="editUserForm">
        <form id="addUserForm" data-id="{{_id}}">
            <h3>修改用户信息</h3>
            <div class="form-group userimg">
                <div class="user-img">
                    <label for="InputFile" class="input-img">
                        <input type="file" id="InputFile">
                        {{if avatar}}
                        <img src="{{avatar}}" id="preview">
                        {{else}}
                        <img id="preview" src="\uploads\default.jfif">
                        {{/if}}
                    </label>
                    <!-- 隐藏域-真实头像 -->
                    <input type="hidden" name="avatar" id="hiddenAvatar" value="{{avatar}}">
                </div>
            </div>
            <div class="form-group">
                <label>邮箱地址</label>
                <input class="form-control" type="email" placeholder="请输入邮箱" name="email" value="{{email}}">
            </div>
            <div class="form-group">
                <label for="InputName">昵称</label>
                <input type="text" class="form-control" id="InputName" placeholder="请输入昵称" name="nickName"
                    value="{{nickName}}">
            </div>
            <div class="form-group">
                <div class="radio-inline">
                    <label> <input type="radio" name="status" value="1" {{status==1?'checked':''}}>激活</label>
                </div>
                <div class="radio-inline">
                    <label><input type="radio" name="status" value="0" {{status==0?'checked':''}}>未激活</label>

                </div>
            </div>
            <div class="form-group">
                <div class="radio-inline">
                    <label> <input type="radio" name="role" value="admin" {{role=='admin'?'checked':''}}>管理员</label>

                </div>
                <div class="radio-inline">
                    <label> <input type="radio" name="role" value="normal" {{role=='normal'?'checked':''}}>普通用户</label>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary add-user">修改</button>
            </div>
        </form>
    </script>
    <!-- 4、修改用户信息表单-结束 -->
  
    <!-- 
        记录一个失误：
        我总是追求简洁实用箭头函数，但是在事件委托的时候，使用箭头函数会导致this指向有问题
        获取不到被委托元素的值，此时需要将箭头函数改为普通函数就好！！！
     -->
</body>

</html>